q<template>
    <div class="edu-page-warp">
        <ConditionCard
            shadow="never"
            @search="onSubmit"
            @reset="reset('queryForm')"
        >
            <el-form ref="queryForm" :model="queryForm" label-position="right" label-width="110px" label-suffix=":">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item :label="$t('minor.major.minorGrade')" prop="minorGrade">
                            <el-date-picker
                                v-model="queryForm.minorGrade"
                                value-format="yyyy"
                                type="year"
                                clearable
                                :placeholder="$t('common.pla.pleaseSelect')"
                                @change="queryCampusProfessions(1)"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('minor.major.college')" prop="collegeCode">
                            <DictSelect
                                filterable
                                v-model="queryForm.collegeCode"
                                :data="options.faculty"
                                :clearable="!global.isAcdemicDean"
                                @change="queryCampusProfessions(1)"
                                style="width: 100%;"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="辅修专业" prop="major">
                            <DictSelect
                                v-model="queryForm.major"
                                :data="options.profession"
                                :clearable="true"
                                :filterable="true"
                                style="width:100%;"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="审核状态"  prop="status">
                            <el-select v-model="queryForm.status" style="width: 100%" clearable >
                                <el-option
                                    v-for="item in approveStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </ConditionCard>
        <el-card shadow="never" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">微专业培养方案查询</h1>
            <div class="div-main clearfix">   
                <div class="float-left">
                    <el-input
                        v-model="queryForm.name"
                        :placeholder="$t('culture.profession.searchForScheneName')"
                        prefix-icon="el-icon-search"
                        @change="handSearchChang"
                    />
                </div>
                <div class="float-right">
                    <el-button
                        @click="exportFile('word')"
                        v-if="showOperateButton"
                    >{{ $t('culture.cultureScheme.exportWordZip') }}</el-button>
                    <el-button
                        @click="exportFile('pdf')"
                        v-if="showOperateButton"
                    >{{ $t('culture.cultureScheme.exportPdf') }}</el-button>
                </div>
            </div>
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                @select="selectRow"
                @selection-change="selectionChange"
                tooltip-effect="light"
            >
                <el-table-column type="selection" width="55"/>
                <el-table-column label="方案名称" show-overflow-tooltip  min-width="150">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="previewCulture(scope.row)"
                            size="mini"
                        >{{scope.row.name}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="辅修年级" prop="minorGrade" width="80"/>
                <el-table-column :label="$t('minor.major.college')" prop="collegeCodeI18n" show-overflow-tooltip/>
                <el-table-column label="辅修专业" prop="majorNameCn" show-overflow-tooltip/>
                <el-table-column label="审核状态" show-overflow-tooltip >
                        <template slot-scope="scope">
                            <el-tag
                                v-if="scope.row.status == '0'"
                                type="info"
                                size="mini"
                                disable-transitions
                            >{{ getPushLable(scope.row.status) }}</el-tag>
                            <el-tag
                                v-if="scope.row.status == '2'"
                                type="warning"
                                size="mini"
                                disable-transitions
                            >{{ getPushLable(scope.row.status) }}</el-tag>
                            <el-tag
                                v-if="scope.row.status == '1'"
                                type="success"
                                size="mini"
                                disable-transitions
                            >{{ getPushLable(scope.row.status) }}</el-tag>
                            <el-tag 
                                v-if="scope.row.status == 4" 
                                type="danger" 
                                size="mini"
                            >{{ getPushLable(scope.row.status) }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="下一级审核人" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.approveName}}</template>
                    </el-table-column>
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryForm.pageSize_"
                        :total="queryForm.total"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        style="float: right;margin:0;"
                    />
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import UTILS from "common/src/utils/utils";
import { queryProfession } from "common/src/api/minor/minorMajorManager";
import { queryDic } from "common/src/api/dictionary";
import { findFaculty } from "common/src/api/faculty";
import {
    queryMinorCultureSchemeList,
    exportCultureSchemePdfOrWordZip,
} from "common/src/api/minor/minorCultureScheme";
import mixin from 'common/src/mixins/index';
export default {
    name: "CultureSchemeQuery",
    mixins: [mixin],
    data() {
        return {
            queryForm: {
                minorGrade: "", // 年级
                collegeCode: "", // 学院
                major: "",//专业
                status: "", // 状态
                type: "", // pdf或者word
                name: "", // 名称
                pageNum_: 1,
                pageSize_: 20,
                total: 0
            },
            options: {
                faculty: [],
                profession: [],
                pushStatus: [
                    { label: "草稿", value: 0 },
                    { label: "通过", value: 1 },
                    { label: "审核中", value: 2 },
                    { label: "驳回", value: 3 },
                    { label: "变更中", value: 4 }
                ],
            },
            tableData: [],
        };
    },
    computed: {
        approveStatus() {
            return this.options.pushStatus.filter(item => item.value != 3)
        }
    },
    created() {
        this.initOptions();
        this.setExportButtonVisible();
    },
    methods: {
        setExportButtonVisible() {
            let currentUser =
                this.$store.state.session.user ||
                JSON.parse(localStorage.getItem("user"));
            this.showOperateButton = currentUser.currentRole == 1;
        },
        initOptions() {
            findFaculty().then(res => { 
                let data = {"X_YX": res.data};
                UTILS.fillSelect({ faculty: "X_YX" }, data, this.options);
                if (this.global.isAcdemicDean) {
                    this.queryForm.collegeCode = this.options.faculty[0] && this.options.faculty[0].value || '';
                    this.queryCampusProfessions(1);
                }
            }).finally( () => { 
                this.onSubmit();
            })
            // const data = {
            //     lang: this.$store.getters.language || "cn",
            //     type: "allChild",
            //     keys: ["X_PYCC"]
            // };
            // queryDic(data).then(res => {
            //     if (res.code == 200) {
            //         UTILS.fillSelect(
            //             {
            //                 trainingLevel: "X_PYCC"
            //             },
            //             res.data,
            //             this.options
            //         );
            //     }
            // });
        },
        handleSearch() {
            this.getCultureSchemes();
        },
        async getCultureSchemes() {
            queryMinorCultureSchemeList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.queryForm.pageNum_ = res.data.pageNum_;
                    this.queryForm.pageSize_ = res.data.pageSize_;
                    this.queryForm.total = res.data.total_;
                }
            });
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.getCultureSchemes();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.getCultureSchemes();
        },
        handSearchChang() {
            this.getCultureSchemes();
        },
        selectionChange(selection) {
            const self = this;
            self.multipleSelection = selection;
        },
        //查询专业
        queryCampusProfessions(type) {
            let collegeCode = "";
            if (type === 1) {
                collegeCode = this.queryForm.collegeCode;
                this.queryForm.major = "";
                this.options.profession = [];
            }
            let params = {
                minorGrade: this.queryForm.minorGrade,
                collegeCode: collegeCode
            };
            queryProfession(params).then(res => {
                if (res.code == 200) {
                    type === 1 && (this.options.profession = res.data);
                }
            });
        },
        onSubmit() {
            this.queryForm.pageNum_ = 1;
            this.getCultureSchemes();
        },
        reset(ref) {
            this.queryForm.name = "";
            let originCode = this.queryForm.collegeCode;
            this.$refs[ref].resetFields();
            if (this.global.isAcdemicDean) {
                this.queryForm.collegeCode = this.options.faculty[0] && this.options.faculty[0].value || '';
                originCode !== this.queryForm.collegeCode && this.queryCampusProfessions(1);
            }
            this.getCultureSchemes();
            this.queryForm.pageNum_ = 1
            this.queryForm.pageSize_ = 20
        },
        exportFile(type) {
            const ids = _.map(this.multipleSelection || [], "id");
            if(ids.length==0){
                this.$message({
                    type: "warning",
                    message: "请勾选培养方案再导出数据"
                });
                return; 
            }
            const str = ids.join(",");
            let data={
                ids:str,
                type :type,
                status:this.queryForm.status
            };
            exportCultureSchemePdfOrWordZip(data);
        },
        getPushLable(value) {
            const pushStatu = this.options.pushStatus.find(
                t => t.value === value
            );
            if (pushStatu === "{}") {
                return value;
            } else {
                return pushStatu.label;
            }
        },
        previewCulture(row) {
            this.$router.push({
                name: 'minorCultureSchemeView',
                params: {
                    id: row.id,
                    title: row.name,
                    currentPath: this.$route.path
                }

            })
        }
    }
};
</script>
<style lang="scss" scoped>
.div-main {
    margin-bottom: 16px;
  }
</style>

